<style>
    .layui-input-inline{margin-top:10px;}
</style>
<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>资金归集</cite></a>
        <a><cite>支付宝直付通</cite></a>
        <a><cite>结算记录</cite></a>
    </span>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">结算记录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layui-form" style="float:right;">
                        <div class="layui-form-item" style="margin:0;">
                            <div class="layui-input-inline">
                                <input type="text"id="searchPayOrderId" placeholder="支付订单号" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" id="searchSmId" autocomplete="off" placeholder="商户smid" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <select id="searchStatus" lay-search="">
                                    <option value="">结算状态</option>
                                    <option value="1">待结算</option>
                                    <option value="3">成功</option>
                                    <option value="4">失败</option>

                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 64px">
                                <a id="search" class="layui-btn"><i class="layui-icon layui-icon-search"></i>搜索</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layuiAdmin-btns" style="margin-bottom: 10px;"></div>
                </div>
                <table id="XxPay_Mgr_Record_dataAll" lay-filter="XxPay_Mgr_Record_dataAll"></table>

            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['table','util', 'form', 'table', 'admin'], function(){
        var table = layui.table
        ,$ = layui.$
        ,form = layui.form
        ,element = layui.element
        ,table = layui.table
        ,view = layui.view
        ,admin = layui.admin;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

        var tplStatus = function(d){
            if(d.status == 1) {
                return "<span style='color: blue'>待结算</span>";
            }else if(d.status == 2) {
                return "<span style='color: orangered'>处理中</span>";
            }else if(d.status == 3) {
                return "<span style='color: green'>成功</span>";
            }else if(d.status == 4) {
                return "<span style='color: red'>失败</span>";
            }
        };

        //标题内容模板
        var tplTitle = function(d){

            if(d.status == 4){
                return "<a class='layui-btn layui-btn-xs layui-btn-primary' lay-event='retry'><i class='layui-icon layui-icon-about'></i>重新发起结算</a>";
            }
            return "";
        };

        var tplApplyInfo = function(d){
            if(!d.applyInfo){
                return "";
            }

            let array = JSON.parse(d.applyInfo);

            let result = "";
            $.each(array, function(){

                result += `<div>时间： ${this.applyTime} <br/>信息： ${JSON.stringify(this.applyResult)} <hr/></div>`;

            });

            return result;
        }


        table.render({
            elem: '#XxPay_Mgr_Record_dataAll'
            ,url: layui.setter.baseUrl + '/pay_alizft_sett_record/list'
            ,where: { access_token: layui.data(layui.setter.tableName).access_token}
            ,id: 'tableReload'
            ,cols: [[
                {field:'payOrderId', title: '支付订单号'}
                ,{field: 'payOrderAmount', title: '支付金额', templet: '<div>{{ d.payOrderAmount/100 }}</div>', width: 100}
                ,{field:'payOrderSubject', title: '订单标题'}
                ,{field:'channelOrderNo', title: '支付宝单号'}
                ,{field:'smid', title: 'smid'}
                ,{field:'passageTemplateId', title: '账号模板ID'}
                ,{title: '状态', templet: tplStatus}
                ,{title: '接口结果', templet: tplApplyInfo}
                ,{title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
                ,{field: 'edit', fixed: "right", width: 140, title: '操作', templet: tplTitle }
            ]]
            ,page: true
            ,skin: 'line'
        });


        //监听工具条
        table.on('tool(XxPay_Mgr_Record_dataAll)', function(obj){
            var data = obj.data;
            if(obj.event === 'retry'){

                layer.confirm("确认重新发起结算？", function(index){
                    layer.close(index);
                    var loadingIndex = layer.load();
                    admin.req({
                        type: 'post',
                        url: layui.setter.baseUrl + '/pay_alizft_sett_record/retry',
                        data: {recordId: data.id},
                        success: function(res){
                            if(res.code == 0){
                                layer.msg("提交成功，请查看最新状态。");
                                table.reload('tableReload');
                            }
                        },
                        complete:function(){
                            layer.close(loadingIndex);
                        }
                    });
                });
            }
        });

        // 搜索
        $('#search').on('click', function() {
            var smid = $('#searchSmId').val();
            var payOrderId = $('#searchPayOrderId').val();
            var status = $("#searchStatus").val();
            //执行重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    smid: smid,
                    payOrderId: payOrderId,
                    status : status
                }
            });
        });
        // 渲染表单
        form.render();
    });
    
</script>
